<template>
    <div>
        <h1>用户详情信息注册表</h1>
        <table class="table table-bordered">
            <tr>
                <td>真实姓名</td>
                <td><input type="text"  placeholder="请输入真实姓名" v-model="T_Dname"/></td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td><input type="text"  placeholder="请输入身份证号" v-model="T_Dcard" @change="sssss"/></td>
            </tr>
            <tr>
                <td>用户类型</td>
                <td>
                    <select v-model="T_Tid">
                        <option value="0">==请选择==</option>
                       <option v-for="item in Users" :key="item.T_Tid" :value="item.T_Tid">{{ item.T_Tname }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td><input type="text"  placeholder="请输入联系方式" v-model="T_Dphone"/></td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td><input type="date" v-model="T_Ddate" ></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" v-model="T_Dsex" value="true" checked/>男
                    <input type="radio" v-model="T_Dsex" value="false"/>女
                </td>
            </tr>
            <tr>
                <td>年收入</td>
                <td><input type="text"  placeholder="请输入年收入" v-model="T_Dincome"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="btn btn-primary" @click="addUser" >注册</button>
                    <button class="btn btn-danger" >取消</button>
                </td>
            </tr>

        </table>
    </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ref ,onMounted} from 'vue';
const T_Dname=ref("");
const T_Dcard=ref("");
const T_Tid=ref(0);
const T_Dphone=ref("");
const T_Ddate=ref("");
const T_Dsex=ref(true);
const T_Dincome=ref(0);

import axios from 'axios';
const route = useRoute();
const id = route.params.id;



const Users:any= ref([])



onMounted(()=>{
    getUser();
})
const getUser=()=>{
    axios({
        method:"get",
        url:"http://localhost:57969/api/User/UserType"
    })
    .then((res)=>{
        Users.value=res.data;    
    })
    .catch((err)=>{
        console.log(err);
    })
}

const sssss = () => {
    const bir = T_Dcard.value.substring(6, 14)
    const yea = bir.substring(0, 4)
    const mon = bir.substring(4, 6)
    const dat = bir.substring(6, 8)
    T_Ddate.value = yea + "-" + mon + "-" + dat
}
const addUser=()=>{
    if(T_Dname.value=="")
    {
        alert("真实姓名不能为空");
        return;
    }
    if(T_Dcard.value=="")
    {
        alert("身份证号不能为空");
        return;
    }
    var reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(!reg1.test(T_Dcard.value))   
    {
        alert("身份证号格式不正确");
        return;
    }
    if(T_Tid.value==0)
    {
        alert("用户类型不能为空");
        return;
    }
    if(T_Dphone.value=="")
    {
        alert("联系方式不能为空");
        return;
    }
        //联系方式正则
        var reg = /^1[3456789]\d{9}$/;
    if(!reg.test(T_Dphone.value))
    {
        alert("联系方式格式不正确");
        return;
    }
    if(T_Ddate.value=="")
    {
        alert("出生日期不能为空");
        return;
    }





    //年收入区间判断
    if(Number(T_Dincome.value<0)||Number(T_Dincome.value>50000))
    {
        alert("年收入范围在0-50000之间");
        return;
    }



    axios({
        method:"post",
        url:"http://localhost:57969/api/User/UserAdd",
        data:{
            T_Dname:T_Dname.value,
            T_Dcard:T_Dcard.value,
            T_Tid:T_Tid.value,
            T_Dphone:T_Dphone.value,
            T_Ddate:T_Ddate.value,  
            T_Dsex:T_Dsex.value,
            T_Dincome:T_Dincome.value,
            U_Id:id
        }
    })
    .then((res)=>{
        
        if(res.data>0)
        {
            alert("注册成功");

        }
        else
        {
            alert("注册失败");
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>
